<template>
  <view class="main">
    <view class="top">
      <text class="top-text">团体入园凭证</text>
    </view>
    <view class="time">
      <text class="time-text">{{ selectedDate }}  {{ selectedTime }}</text>
    </view>
    <view class="yuyue">
      <text class="yuyue-text">预约信息</text>
    </view>
    <view class="card">
      <uni-card>
        <view class="msg">团体名称：{{ teamname }}</view>
        <view class="msg">团体人数：{{ selectedValue }}人</view>
      </uni-card>
    </view>
    <view class="card">
      <uni-card>
        <view class="msg">姓名：{{ name }}</view>
        <view class="msg">证件类型：{{ idtype }}</view>
        <view class="msg">证件号码：{{ id }}</view>
        <view class="msg">手机号码：{{ phone }}</view>
        <view class="msg">同行人数：{{ selectedValue }}</view>
      </uni-card>
    </view>
    <view class="huacao">
      <text class="huacao-text">园区花草，种植不易请爱护</text>
    </view>
  </view>
  <view class="bottom">
    <text class="bottom-text1">离凭证消失剩余</text>
    <text class="bottom-text2">{{ timeLeft }}</text>
    <text class="bottom-text1">。可发起新的预约</text>
  </view>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const name = ref('');
const id = ref('');
const idtype = ref('');
const phone = ref('');
const selectedValue = ref('');
const teamname = ref('');
const selectedDate = ref('');
const selectedTime = ref('');
const timeLeft = ref('4小时00分钟00秒'); // 初始化倒计时为4小时

let countdownInterval;

onLoad((option) => {
  name.value = option.name;
  id.value = option.idNumber;
  idtype.value = option.Value;
  phone.value = option.phoneNumber;
  selectedValue.value = option.selectedValue;
  teamname.value = option.teamname;
  selectedDate.value = option.selectedDate;
  selectedTime.value = option.selectedTime;
});

function startCountdown() {
  let totalTimeInSeconds = 4 * 60 * 60; // 4小时转为秒

  countdownInterval = setInterval(() => {
    if (totalTimeInSeconds > 0) {
      totalTimeInSeconds--;

      const hours = Math.floor(totalTimeInSeconds / 3600);
      const minutes = Math.floor((totalTimeInSeconds % 3600) / 60);
      const seconds = totalTimeInSeconds % 60;

      timeLeft.value = `${hours}小时${minutes}分钟${seconds}秒`;
    } else {
      clearInterval(countdownInterval); // 清除倒计时
    }
  }, 1000); // 每秒更新一次
}

onMounted(() => {
  startCountdown(); // 页面加载时启动倒计时
});

onBeforeUnmount(() => {
  clearInterval(countdownInterval); // 页面卸载时清除计时器
});
</script>

<style scoped lang="scss">
.card {
  margin-left: 16px;
  margin-right: 16px;
  background: #FFFFFF;
  border-radius: 12px;
}
.main {
  margin: 12px;
  height: 578px;
  background-image: url("../../static/img/pingzheng.png");
  background-size: cover;
}
.top {
  text-align: center;
  height: 85px;
}
.msg {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  margin-top: 12px;
}
.top-text {
  opacity: 0.9;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 20px;
  color: #000000;
  text-align: center;
  line-height: 85px;
}
.time {
  text-align: center;
  position: relative;
  top: -10px;
}
.time-text {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #5F5F5F;
}
.yuyue {
  text-align: left;
  margin-left: 15px;
  margin-top: 40px;
  margin-bottom: 10px;
}
.yuyue-text {
  font-family: PingFangSC-Medium;
  font-weight: bold;
  font-size: 15px;
  color: #000000;
}
.huacao {
  margin-top: 30px;
  text-align: center;
}
.huacao-text {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #5F5F5F;
}
.bottom {
  text-align: center;
  margin-top: 41px;
  height: 41px;
}
.bottom-text1 {
  color: #5f5f5f;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
}
.bottom-text2 {
  color: #8dcb6d;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
}
</style>
